<!-- components/PersonalInfo.vue -->
<template>
  <div class="personal-info">
    <h3>基本信息</h3>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="教师编号">{{ props.teacherInfo.teacherId || '--' }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{ props.teacherInfo.name || '--' }}</el-descriptions-item>
      <el-descriptions-item label="职称">{{ props.teacherInfo.title || '--' }}</el-descriptions-item>
      <el-descriptions-item label="专业领域">{{ props.teacherInfo.specialty || '--' }}</el-descriptions-item>
      <el-descriptions-item label="所属学校">{{ props.teacherInfo.school || '--' }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{ props.teacherInfo.registerTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ props.teacherInfo.phone || '--' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ props.teacherInfo.email || '--' }}</el-descriptions-item>
    </el-descriptions>

    <h3 style="margin-top: 30px;">教学信息</h3>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="负责班级">{{ props.teacherInfo.classCount || 0 }}个</el-descriptions-item>
      <el-descriptions-item label="学生总数">{{ props.teacherInfo.studentCount || 0 }}人</el-descriptions-item>
      <el-descriptions-item label="授课科目">{{ props.teacherInfo.courses || '--' }}</el-descriptions-item>
      <el-descriptions-item label="教学年限">{{ props.teacherInfo.teachingYears || '--' }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
interface TeacherInfo {
  teacherId: string
  name: string
  title: string
  specialty: string
  school: string
  registerTime: string
  phone: string
  email: string
  classCount: number
  studentCount: number
  courses: string
  teachingYears: string
}

const props = defineProps<{
  teacherInfo: TeacherInfo
}>()
</script>

<style scoped>
.personal-info h3 {
  margin-bottom: 20px;
  color: #303133;
  font-weight: 600;
}
</style>
